<!--  -->
<template>
  <div class="container">
    <div
      v-for="(item, index) in state.list"
      :key="index"
      class="item-sty"
      :class="item.active ? 'active' : ''"
      :style="{ backgroundColor: item.color }"
      @click="clickItem(index)"
    >
      <h3>{{ item.name }}</h3>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const state = reactive({
  list: [
    {
      name: "巴黎时装周",
      color: "green",
      active: true,
    },
    {
      name: "巴黎时装周",
      color: "green",
    },
    {
      name: "巴黎时装周",
      color: "green",
    },
    {
      name: "巴黎时装周",
      color: "green",
    },
    {
      name: "巴黎时装周",
      color: "green",
    },
  ],
});

function clickItem(i) {
  state.list.forEach((item, index) => {
    if (index === i) {
      item.active = true;
    } else {
      item.active = false;
    }
  });
}
</script>
<style lang="scss" scoped>
.container {
  height: 80vh;
  width: 90vw;
  margin: 0 auto;
  display: flex;
  .item-sty {
    flex: 0.5;
    height: 100%;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    margin: 10px;
    position: relative;
    transition: flex 0.7s ease-in;

    h3 {
      position: absolute;
      left: 20px;
      bottom: 20px;
      font-size: 24px;
      opacity: 0;
    }
  }
  .active {
    flex: 5;
    h3 {
      opacity: 1;
      transition: opacity 0.3s ease-in 0.4s;
    }
  }
}
@media (max-width: 600px) {
  .container {
    width: 100vw;
    .item-sty:nth-of-type(4),
    .item-sty:nth-of-type(5) {
      display: none;
    }
  }
}
</style>
